<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师端页面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container{
            width: 1300px;
            height: 600px;
            margin: 20px auto;
            position: relative;
        }

        .header_hea{
            width: 100%;
            line-height: 50px;
            font-size: 21px;
            padding-left: 30px;
            color: forestgreen;
        }

        .header_hea a{
            text-decoration: none;
            color: orangered;
            position: relative;
        }

        /*    做一个伪类边框*/
        .header_hea:before{
            content: '';
            height: 44px;
            left: 0;
            right: 0;
            border: 3px dashed dodgerblue;
            position: absolute;
        }

        /*    中部*/
        .main_mat{
            width: 100%;
            height: 550px;
        }

        .mat_left{
            width: 20%;
            height: 550px;
            float: left;
            text-align: center;
        }

        .mat_left a{
            text-decoration: none;
            color: dodgerblue;
            font-size: 21px;
            line-height: 70px;
            position: relative;
            display: block;
        }

        .mat_left:before{
            content: '';
            height: 550px;
            left: 0;
            right: 80%;
            border-left: 3px dashed dodgerblue;
            border-right: 3px dashed dodgerblue;
            border-bottom: 3px dashed dodgerblue;
            position: absolute;
        }

        .mat_right{
            width: 80%;
            height: 550px;
            float: right;
        }

        .mat_right:before{
            content: '';
            height: 550px;
            left: 20%;
            right: 0;
            border-right: 3px dashed dodgerblue;
            border-bottom: 3px dashed dodgerblue;
            position: absolute;
        }

        .mat_list{
            width: 80%;
            overflow: hidden;
            margin: 20px auto;
            position: relative;
        }
        .mat_list label{
            width: 26.666%;
            display: inline-block;
            line-height: 45px;
            font-size: 18px;

        }

        /*    表*/
        .mat_border{
            width: 82%;
            overflow: hidden;
            margin: 20px auto;
            position: relative;
            text-align: center;
        }
        .mat_border label{
            width: 24%;
            display: inline-block;
            line-height: 65px;
            font-size: 15px;
            color: white;
            font-weight: bold;
            background-color: #ffa07a;
            margin: 4px 0;
        }

        /*    分页*/
        .ol_li{
            width: 82%;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        .ol_li li{
            width: 40px;
            height: 35px;
            text-align: center;
            border: 1px rebeccapurple solid;
            border-radius: 20%;
            list-style: none;
            cursor: pointer;
            margin: 0 10px;
            float: left;
        }
        .ol_li a{
            text-decoration: none;
            display: inline-block;
            width: 40px;
            line-height: 35px;
        }

        /*    背景颜色样式*/
        .default{
            background-color: aquamarine;
            color: white;
            border-radius: 20%;
        }

        .pore{
            width: 80%;
            margin: 30px auto;
            overflow: hidden;
            position: relative;
        }

        .select{
            width: 200px;
            padding: 7px 0;

        }
    </style>
</head>
<body>
<!--大区域-->
<div class="container">
    <!--    头部区域-->
    <div class="header_hea">
        欢迎学号/工号：<%= uid %>用户，使用学生管理系统发，当前您的职务是：<%= pname%>&nbsp;【<a href="/logout">退出登录</a>】
    </div>

    <!--    中部区域-->
    <div class="main_mat">
        <div class="mat_left">
            <a href="/home_teach">查询学生登录日志</a>
            <a href="/sel_scores">查询专业学生成绩</a>
            <a href="/add_scores">录入专业学生成绩</a>
            <a href="/sel_list">查询专业学生信息</a>
            <a href="/add_list">录入专业学生信息</a>
        </div>
        <!--        右边显示区域-->
        <div class="mat_right">

            <div class="pore">
                <label>请选择学期成绩：</label>
                <!--            显示-->
                <select name="sel" class="select" onchange="postsel(this.value)">
                    <option disabled="disabled" selected="selected">请选择</option>
                    <option value="1">第一个学期成绩</option>
                    <option value="2">第二个学期成绩</option>
                    <option value="3">第三个学期成绩</option>
                    <option value="4">第四个学期成绩</option>
                    <option value="5">第五个学期成绩</option>
                </select>

<!--                显示成绩区域-->
                <table border="1" id="tabs" cellpadding="0" cellspacing="0" style="width: 100%;margin: 30px auto;border: 1px aqua solid">

                </table>

            </div>

        </div>
    </div>
</div>
</body>
</html>
<script src="./jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
<!--    将当前点击的下拉菜单的value值传递出去-->
function postsel(val){
    //console.log(val)
//    将获取到的value值，作为ajax的参数以post的提交方式传递给模块sel_scores
//    ajax提交的数据获取的方式有两种，  一种是参数获取， 第二种是bodyParser中间件获取

    $.post({
        url : '/sel_scores',
        dataType : 'json',
        data : { num : val },
    //    成功之后回调这个函数
        success : function(test){
        //字符串拼接tr
            console.log(test)
            var str = '';
            //    将str字符串添加到table标签当中
           ///console.log(str.length)  0
                str += '<tr align="center" >'
                str += '<th style="padding: 8px 0;">学号</th>'
                str += '<th style="padding: 8px 0;">姓名</th>'
                //将test的第一个下表循环出他的学号和名字
                test[0].forEach( (list)=>{
                    str += '<th style="padding: 8px 0;">'+list.class_name+'</th>'
                } )
                str += '</tr>'

                test.forEach( (item)=>{
                    str += '<tr align="center" >'
                    str += '<td style="padding: 8px 0;">'+item[0].uid+'</td>'
                    str += '<td style="padding: 8px 0;">'+item[0].stu_name+'</td>'
                    //循环每门课从成绩
                    item.forEach( (val)=>{
                        str += '<td style="padding: 8px 0;">'+val.scores+'</td>'
                    } )

                    str += '</tr>'
                } )
            $('#tabs').html(str)
        }
    })
}
</script>
